<template>
  <!-- 竖向柱状图 -->
  <div class="comp" ref="vertical"></div>
</template>

<script  setup>
// 1.引入基础模块（echarts api）
import { inject, ref, onMounted, onBeforeUnmount } from "vue";
import themeStore from "../store/index.js";
const store = themeStore();
const echarts = inject("echarts");
const api = inject("api");

// 2.初始化页面数据
let vertical = ref(null); //初始化图表容器ref值
let echartsInstance = null; //初始化echarts实例对象
let allData = []; //初始化业务数据

store.$subscribe((mutation, state) => {
  echartsInstance.dispose(); // 清除旧的echarts实例
  initEcharts(); //创建新实例
  editEcharts(); //根据数据继续完善
  // window.addEventListener('resize', Adaptation)//开启窗口变化监听
  Adaptation();
});
function initEcharts() {
  echartsInstance = echarts.init(vertical.value, store.themeName);
  let initOptions = {
    title: {
      text: "▍全国各地区种植收成情况",
      top: "3%",
      left: "3%",
    },
    grid: {
      show: false,
      top: "12%",
      left: "3%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },
    // 配置提示语
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        type: "bar",
        label: {
          show: true,
          position: "top",
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "orange", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "orangered", // 100% 处的颜色
              },
            ],
          },
        },
      },
    ],
  };
  echartsInstance.setOption(initOptions);
}
async function getData() {
  let { data } = await api("plantingHarvest");
  allData = data;
  editEcharts();
}
function editEcharts() {
  let xAxisValue = allData.map((item) => item.month);
  let seriesValue = allData.map((item) => item.harvest);
  let editOptions = {
    xAxis: {
      data: xAxisValue,
    },
    series: [
      {
        data: seriesValue,
      },
    ],
  };
  echartsInstance.setOption(editOptions);
}
function Adaptation() {
  console.log(1);
  let width = vertical.value.offsetWidth;
  let scale = (width / 100) * 3.6;
  let adapOptions = {
    title: {
      textStyle: {
        fontSize: scale,
      },
    },
    series: [
      {
        barWidth: scale,
        itemStyle: {
          borderRadius: [scale / 2, scale / 2, 0, 0],
        },
      },
    ],
  };
  echartsInstance.setOption(adapOptions);
  echartsInstance.resize();
}

onMounted(() => {
  initEcharts();
  getData();
  window.addEventListener("resize", Adaptation);
  Adaptation();
});
// 暴露导出适配方法(宏命令 不需要引入就可以使用)
defineExpose({
  Adaptation,
});
</script>
